<template>
  <div>
    <!-- vant 输入框 -->
    <van-search
      shape="round"
      v-model.trim="value"
      placeholder="请输入搜索关键词"
      @clear="clearFn"
      @input="inputFn"
    />

    <!-- 热搜关键词 -->
    <div v-if="hotResultList.length === 0" class="search_wrap">
      <p class="hot_title">热门搜索</p>

      <!-- 热搜关键词容器 -->
      <div class="hot_name_wrap">
        <!-- 关键词 -->
        <span
          class="hot_item"
          v-for="(item, index) in hotWordsList"
          :key="index"
          @click="clickFn(item.first)"
          >{{ item.first }}</span
        >
      </div>
    </div>

    <!-- 搜索结果 -->
    <div v-else class="search_wrap">
      <p class="hot_title">搜索结果</p>
      <div class="hot_name_wrap">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <SongItem
            v-for="item in hotResultList"
            :key="item.id"
            :title="item.name"
            :label="item.ar[0].name"
            :id="item.id"
          ></SongItem>
        </van-list>
      </div>
    </div>
  </div>
</template>
<script>
import SongItem from "@/components/SongItem.vue";
import { HotWords, HotsResult } from "@/api/index";
export default {
  components: {
    SongItem,
  },
  methods: {
    //监听搜索框输入的内容，发起请求  搜索结果
    async inputFn() {
      //先判断是否有内容，没有内容就不发送请求
      if (this.value === "") return;
      this.page = 1;
      this.finished = false;

      const hotResult = await this.getResult();
      console.log(hotResult);
      if (hotResult.result.songs === undefined) {
        hotResult.result.songs = [];
        return;
      }
      this.hotResultList = hotResult.result.songs;
    },
    //点击关键词
    async clickFn(words) {
      //拿到 关键词的时候发起请求，将搜索结果展示出来
      this.value = words;
      this.page = 1;
      this.finished = false;

      //2.调用 请求热词搜索结果 的接口函数，然后渲染
      //   const { data: hotResult } = await HotsResult({
      //     keywords: this.value,
      //   });
      const hotResult = await this.getResult();
      // console.log(hotResult);
      this.hotResultList = hotResult.result.songs;
    },
    //搜索框的清除功能
    clearFn() {
      //使搜索结果的数据为0 ，空数组
      this.hotResultList = [];
    },
    //加载事件
    async onLoad() {
      // console.log("触发了加载事件");
      this.page++;
      //发起 获取搜索结果数据的 请求（重复的代码，建议封装起来）
      const hotResult = await this.getResult();
      //如果数据加载完，修改finished,loading
      if (hotResult.result.songs === undefined) {
        this.finished = true;
        this.loading = false;
        return;
      }

      //console.log(hotResult);
      //将新加载出来的数据与原数据拼接  展开运算符/concat()
      //   this.hotResultList = this.hotResultList.concat(hotResult.result.songs);
      this.hotResultList = [...this.hotResultList, ...hotResult.result.songs];
      //改变loading的状态
      this.loading = false;
    },
    //封装 获取请求结果   的函数
    async getResult() {
      const { data: hotResult } = await HotsResult({
        keywords: this.value,
        limit: 30,
        offset: (this.page - 1) * 30,
      });
      return hotResult;
    },
  },
  data() {
    return {
      value: "", //关联搜索框的值
      hotWordsList: [], //热词数据
      hotResultList: [], //热词搜索结果
      loading: false, //是否正在加载 ，默认不在加载
      finished: false, //是否加完成全部的数据，默认没有加载完成
      page: 1, //页数
    };
  },
  async created() {
    //1.调用 请求 获取热词关键词 的接口函数，然后渲染
    const {
      data: { result },
    } = await HotWords();
    //console.log(result);
    this.hotWordsList = result.hots;
  },
};
</script>

<style scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>
